
(()=>{
    // $$('.bigList')[3].style.height="123px"
    $$('.navLink')[4].classList.add('bc')
})() 

let changeIndex = null

// for(let i = 0;i < $('.changePic').length;i++){
//     //点击修改要出来画布
//     $('.changePic')[i].onclick = function () {
//         console.log($('.centerLeft')[0])
//         $('.centerLeft')[0].innerHTML = ''
//         $('.box')[0].style.display = 'block'

//     }
// }
function openCropper(a){
    changeIndex = a.getAttribute('data-index')-1
    console.log(changeIndex)
    $('.centerLeft')[0].innerHTML = ''
    $('.box')[0].style.display = 'block'
}

var cropper = null

$('.cropperInput')[0].onchange = function () {
    fileToBase64(this)//把图片放到画布上
    // 使用cdn引入Js
    cropper = new Cropper(image, {
        aspectRatio: 3 / 1,//裁剪框的比例
        viewMode: 1,//图片跟背景布的位置关系
        preview: '.small',//生成预览图的效果地方
        guides: false,//取消裁剪框上的虚线
        // background:true,
        crop: function (e) {//裁剪过程执行的函数

            // console.log(e.detail.x);
            // console.log(e.detail.y);
            // console.log(e.detail.width);
            // console.log(e.detail.height);
            // console.log(e.detail.rotate);
            // console.log(e.detail.scaleX);
            // console.log(e.detail.scaleY);
        }
    });
}




//将file转为base64
function fileToBase64(a) {
    var txt = a.files[0];
    formData = new FormData()
    formData.append('img[]', txt);
    var src = window.URL.createObjectURL(txt);
    //判断宽高
    $('.centerLeft')[0].innerHTML = `
    <img src='${src}' id='image'/>
    `
    let headImg = $('.centerLeft')[0].children[0]
    //图片加载完之后
    headImg.onload = function () {
        let imgWidth = headImg.offsetWidth
        let imgHeight = headImg.offsetHeight
        if (imgWidth > imgHeight) {
            headImg.style.width = '100%'
            headImg.style.height = 'auto'
        } else {
            headImg.style.width = 'auto'
            headImg.style.height = '100%'
        }
    }

}

//复位按钮
$('.resetBtn')[0].onclick = function () {
    if (ifInput()) {
        cropper.reset()
    }
}
//旋转按钮
$('.rotateBtn')[0].onclick = function () {
    if (ifInput()) {
        cropper.rotate(90)
    }
}
//换向按钮
var scale = true
$('.huanXiangBtn')[0].onclick = function () {
    if (ifInput()) {
        if (scale) {
            cropper.scale(-1, 1)
            scale = false
        } else {
            cropper.scale(1, 1)
            scale = true
        }
    }
}
//判断有没有选择图片
function ifInput() {
    if ($('.cropperInput')[0].files[0]) return true
    else return false
}

//确定裁剪
var formData = null
$('.crop')[0].onclick = function () {
    if (ifInput()) {
        var file = null
        let headImg = 'headImg'
        cropper.getCroppedCanvas().toBlob(b => {
            // file = new File([b], headImg,{type: 'multipart/form-data', lastModified: Date.now()});//该方法适用于火狐和谷歌，不适于IE
            console.log(b)
            
            // console.log(file)
            formData = new FormData()
            // formData.append('multipartFile',b);  如果不做处理
            blobToBase64(b,function(e){
                $('.imgimg')[changeIndex].setAttribute('src',e)
            })
            formData.append('multipartFile',b,'temp.jpg');
            closeCrop()
            cropper.destroy()
            // axios({
            //     url: `/index/changeHead?id=${userId}`,
            //     data: formData,
            //     method: 'post'
            // }).then((data) => {
            //     closeCrop()

            //     tigs('修改成功',true)
            //     $('.headImg')[0].src = data.data.data.data.portrait
            // }).catch((err) => {
            //     console.log(err)
            // })
        })

    }
}


function closeCrop(){
    $('.box')[0].style.display = 'none'
}
$('.scloseCropper')[0].onclick = closeCrop


function blobToBase64(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}


//判断改了没有
function ifChange(i){
    let ifChange = 0
    let image = $('.picbox')[i].getAttribute('data-image')
    if(image != $('.imgimg')[i].getAttribute('src')){
        ifChange += 1
    }
    let href = $('.picbox')[i].getAttribute('data-href')
    if(href != $('.linkInput')[i].value){
        ifChange += 1
    }
    let word = $('.picbox')[i].getAttribute('data-word')
    if(word != $('.fontInput')[i].value){
        ifChange += 1
    }
    return ifChange
}

function ifChangeImage(i){
    let image = $('.picbox')[i].getAttribute('data-image')
    if(image != $('.imgimg')[i].getAttribute('src')){
        return true
    }else{
        return false
    }
}
//保存更改

for(let i = 0;i < $('.savePicBtn').length;i++){
    $('.savePicBtn')[i].onclick = function(){
        //判断有没有改
        if(ifChange(i) > 0){
            let href = $('.linkInput')[i].value
                word = $('.fontInput')[i].value
                order = $('.picbox')[i].getAttribute('data-order')
            //判断有没有为空
            if(href && word){
                //判断有没有改照片
                if(ifChangeImage(i)){
                    axios({
                        method:"put",
                        url:`/index/updateFigure?word=${word}&href=${href}&order=${Number(order)}`,
                        data:formData
                    }).then(data=>{
                        if(data.data.data.message == '成功'){
                            $('.picbox')[i].setAttribute('data-href',href)
                            $('.picbox')[i].setAttribute('data-word',word)
                            $('.picbox')[i].setAttribute('data-image',$('.imgimg')[i].getAttribute('src'))
                            tigs('修改成功!',true)
                        }else{
                            console.log(data);
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
                }else{
                    axios({
                        method:"put",
                        url:`/index/updateFigure?word=${word}&href=${href}&order=${Number(order)}`
                    }).then(data=>{
                        if(data.data.data.message == '成功'){
                            $('.picbox')[i].setAttribute('data-href',href)
                            $('.picbox')[i].setAttribute('data-word',word)
                            $('.picbox')[i].setAttribute('data-image',$('.imgimg')[i].getAttribute('src'))
                            tigs('修改成功!',true)
                        }else{
                            console.log(data);
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
                }
            }else{
                tigs('所修改的内容不可为空！',false)
            }
            
        }
    }
}